<template>
  <div class="orders">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            clearable
            v-model="ordersForm.query"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getOrdersList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="16"> </el-col>
      </el-row>
      <el-table border :data="ordersList">
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column label="订单编号" prop="order_number" width="250px">
        </el-table-column>
        <el-table-column label="订单价格" prop="order_price"> </el-table-column>
        <el-table-column label="是否付款" prop="pay_status">
          <template #default="{row}">
            <div
              v-if="row.pay_status == 0"
              style="
                background: #f56c6c;
                width: 48px;
                height: 20px;
                line-height: 20px;
                border-radius: 5px;
                text-align: center;
                color: #fff;
              "
            >
              未付款
            </div>
            <div
              v-else
              style="
                background: #67c23a;
                width: 48px;
                height: 20px;
                line-height: 20px;
                border-radius: 5px;
                text-align: center;
                color: #fff;
              "
            >
              已付款
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"> </el-table-column>
        <el-table-column label="下单时间" prop="create_time"> </el-table-column>
        <el-table-column label="操作" width="120px">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="putaddressV"
          ></el-button>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-location"
            @click="getKuaidi"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ordersForm.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="ordersForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ordersForm.total"
      >
      </el-pagination>

      <el-dialog title="提示" :visible.sync="kuaidiVisible" width="50%">
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(activity, index) in getKuaidiMsg"
            :key="index"
            :timestamp="activity.ftime"
            :icon="activity.icon"
            :color="activity.color"
          >
            {{ activity.context }}
          </el-timeline-item>
        </el-timeline>
        <span slot="footer" class="dialog-footer">
          <el-button @click="kuaidiVisible = false">取 消</el-button>
          <el-button type="primary" @click="kuaidiVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog
        title="修改地址"
        :visible.sync="putdialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          label-width="90px"
          :model="putForm"
          ref="putForm"
          :rules="rules"
        >
          <el-form-item label="省市区/县" prop="diqu">
            <el-cascader
              :options="cityOptions"
              :value="putForm.diqu"
              @change="changeProvince"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="dizhi">
            <el-input v-model="putForm.dizhi"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="putdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="putaddress">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import cityOptions from '@/components/city_data2017_element.js';
export default {
  name: 'Orders',
  data() {
    return {
      cityOptions: cityOptions,
      kuaidiVisible: false,
      putdialogVisible: false,
      ordersForm: {
        query: '',
        pagenum: 1,
        pagesize: 10,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: '',
        total: 0,
      },
      putForm: {
        diqu: '',
        dizhi: '',
      },
      ordersList: [],
      getKuaidiMsg: [],
      rules: {
        diqu: [
          { required: true, message: '请选择收货地址', trigger: 'change' },
        ],
        dizhi: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleClose() {
      this.putdialogVisible = false;
      this.$refs.putForm.clearValidate();
      this.putForm.dizhi = '';
    },
    putaddress() {
      this.$refs.putForm
        .validate()
        .then(() => {
          this.putdialogVisible = true;
        })
        .catch(() => {});
    },
    changeProvince(value) {
      this.putForm.diqu = value;
    },
    // 修改地址
    putaddressV() {
      this.putdialogVisible = true;
    },
    // 获取物流信息
    getKuaidi() {
      this.kuaidiVisible = true;
      this.__apis.orders.getKuaidi().then((res) => {
        if (res.data.meta.status === 200) {
          this.getKuaidiMsg = res.data.data;
          this.getKuaidiMsg[0].icon = 'el-icon-location';
          this.getKuaidiMsg[0].color = '#67C23A';
        }
      });
    },
    // 每页数量改变
    handleSizeChange(size) {
      this.ordersForm.pagesize = size;
      this.getOrdersList();
    },
    // 页码改变
    handleCurrentChange(current) {
      this.ordersForm.pagenum = current;
      this.getOrdersList();
    },
    // 获取列表
    getOrdersList() {
      this.__apis.orders.getOrders(this.ordersForm).then((res) => {
        // console.log(res);
        if (res.data.meta.status === 200) {
          this.ordersList = res.data.data.goods;
          this.ordersForm.total = res.data.data.total;
        } else {
          this.$message.error(res.data.meta.msg);
        }
      });
    },
  },
  created() {
    this.getOrdersList();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  font-size: 12px;
}
.el-card {
  margin-top: 15px;
  min-width: 1120px;
}
.el-table {
  margin: 15px 0;
  font-size: 12px;
}
.el-cascader {
  width: 100%;
}
</style>
